<template>
  <div class='news-list'>
    <public-head>
      <span>物业动态</span>
    </public-head>
    <ul v-if="newsLists.length">
      <router-link :to="{path:'/hotactive/hotactivedetail?settingId=' + list.settingId}" tag="li" v-for="(list,index) in newsLists" :key="list.settingId">
        <!--<div class="left">-->
        <!--<img :src="list.img">-->
        <!--</div>-->
        <div class="right">
          <div class="container" v-html="list.name">
          </div>
        </div>
      </router-link>
    </ul>
    <noitem v-else>
      <p slot="tip">暂无物业动态</p>
    </noitem>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    data() {
      return {
        newsLists: [], // 新闻列表
        listQuery: {
          name: undefined,
          key:"add"
        },
      }
    },

    created() {
      this.isLoading(true)
      // fetch newslist
      this.axios.post(root + '/api/wx/ad/list',{key:"act"}).then((res) => {
        this.isLoading(false)
        this.newsLists = res.data.data
      })
    },
    methods: {
      ...mapActions(['isLoading'])
    },
    computed: {
      ...mapState(['is_loading'])
    }
  }
</script>

<style lang="less" scoped>
  @import '../../common/style/mixin.less';
  .news-list {
    .init;
    li {
      display: -webkit-flex;
      background: #fff;
      padding: .24rem .29rem;
      box-shadow: 0 3px 5px 0 #d0d0d0;
      margin-top: .2rem;
      .left {
        .wh(1.52rem, 1.52rem);
        margin-right: .29rem;
        img {
          .wh(100%, 100%);
          border-radius: 2px;
        }
      }
      .right {
        flex: 1;
        .ft(.24rem);
        .title {
          width: 5rem;
          color: #404040;
          line-height: 0.3rem;
          margin-bottom: .18rem;
          margin-top: .1rem;
          .textoverflow;
        }
        .introduce {
          color: #999;
          line-height: .45rem;
        }
      }
    }
  }
</style>
